import propTypes from "prop-types";
import React from "react";

const DemoOne = function DemoOne(props) {
    let {className, style, title, children} = props
    // 要对chilren 的类型做处理
    // 基于 React.children 对象中提供的方法，对 props.children 做处理
    // 好处：在这些方法内部，已经对 children 的各种形式做了处理
    // let children = children1
    // if (!children) {
    //     children = []
    // } else if (Array.isArray(children)) {
    //     children = [children]
    // }
    children = React.Children.toArray(children);
    // 传递进来的插槽信息，都是编译为 virtualDOM 后传递进来的(而不是传递的标签)
    let headerSolt = children.filter(item => item.props.slot === 'header')
    let footerSolt = children.filter(item => item.props.slot === 'footer')
    let defaultSolt = children.filter(item => !item.props.slot)
    return <div className={className} style={style}>
        {headerSolt}
        <h2>{title}</h2>
        {defaultSolt}
        {footerSolt}
    </div>
}

/* 把函数当作对象，设置静态的私有属性方法，来给其设置属性的校验规则 */
DemoOne.defaultProps = { // 默认值
    x: 0,
}

DemoOne.propTypes = {
    title: propTypes.string.isRequired,
    // 多个校验规则中的一个
    x: propTypes.oneOfType([propTypes.number, propTypes.string]),
}

export default DemoOne